import React,{Component} from 'react';
import DataGrid from "../../../component/datagrid/DataGrid";
import {Button,Modal} from "antd";
import ajax from "../../../util/AjaxUtil";
import qs from "qs";
import EditDataSource from "./EditDataSource";


class DataSource extends Component{

    constructor(props){
        super(props);

        this.renderAction=this.renderAction.bind(this);
        this.openAddDataSource=this.openAddDataSource.bind(this);
        this.handleCancel=this.handleCancel.bind(this);
        this.handleOk=this.handleOk.bind(this);

        this.dataSourceTable=null;
        this.editor=null;


        this.state={
            editModal:{
                title:'添加数据源',
                visible:false
            }
        };
    }

    render(){

        const columns = [
            {
                title: 'id',
                dataIndex: 'id',
                key: 'id',
            },{
                title: '连接名称',
                dataIndex: 'name',
                key: 'name',
            },{
                title: '类型',
                dataIndex: 'type',
                key: 'type',
            },
            {
                title: '驱动类',
                dataIndex: 'driverClass',
                key: 'driverClass',
            },
            {
                title: '链接地址',
                dataIndex: 'url',
                key: 'url',
                width: 500,
                render: (text, record) => (
                    <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
                        {text}
                    </div>
                )
            },
            {
                title: '用户名',
                dataIndex: 'username',
                key: 'username',
            },{
                title: '操作',
                dataIndex: 'action',
                render: this.renderAction
            }
        ];


        return (
            <div>
                <DataGrid onRef={this.dataSourceTableOnRef.bind(this)}
                    paramCard={{title:'查询条件'}}
                    params={[
                        {name:'id',label:'id',rules:[],render:null},
                        {name:'type',label:'类型',rules:[],render:null}
                    ]}
                    tableCard={{
                        title:'数据列表',
                        extra:<Button type="primary" icon="plus" onClick={this.openAddDataSource}>新增</Button>
                    }}
                    table={{
                        columns:columns,
                        bordered:true,
                        rowKey:'id'
                    }}
                    url={'/report/datasource/query'}
                    queryParam={{}}
                >

                </DataGrid>

                <Modal
                    title={this.state.editModal.title}
                    visible={this.state.editModal.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <EditDataSource
                        data={this.state.editModal.data}
                        onRef={this.editDataSourcOnRef.bind(this)}
                    >
                    </EditDataSource>
                </Modal>
            </div>
        )
    }

    renderAction(text, record, index){
        return <React.Fragment>
            <Button type={'primary'} onClick={this.openEditDataSource.bind(this,record)} style={{marginRight:10}} icon={'edit'}>编辑</Button>
            <Button type={'danger'} onClick={this.deleteDataSource.bind(this,record)} icon={'delete'}>删除</Button>
        </React.Fragment>

    }

    deleteDataSource(record){
        ajax.post("/report/datasource/delete",qs.stringify({id:record.id}))
            .then(response=>{
            if (response.data.result==true){
                this.dataSourceTable.reload();
            }
        });
    }

    dataSourceTableOnRef(ref){
        this.dataSourceTable=ref;
    }

    openAddDataSource(){
        this.setState({
            editModal:{
                title:'添加数据源',
                visible:true,
                data:{}
            }
        });
    }

    handleCancel(){
        this.setState({
            editModal:{
                visible:false,
                data:{}
            }
        });
        // this.editor.props.form.resetFields();
    }

    handleOk(){
        this.editor.props.form.validateFields((errors, values) => {
            if (!errors){
                let data=this.editor.getData();
                let param=this.editor.props.form.getFieldsValue();
                if (data.id==null){//新增
                    ajax.post("/report/datasource/create",qs.stringify(param)).then(response=>{
                        if (response.data.result){
                            this.dataSourceTable.reload();
                            this.handleCancel();
                        }
                    });
                } else {//修改
                    param.id=data.id;
                    ajax.post("/report/datasource/edit",qs.stringify(param)).then(response=>{
                        if (response.data.result){
                            this.dataSourceTable.reload();
                            this.handleCancel();
                        }
                    });
                }
            }
        });
    }

    openEditDataSource(record){
        this.setState({
            editModal:{
                title:'编辑数据源',
                visible:true,
                data:record
            }
        });
    }

    editDataSourcOnRef(editor){
        this.editor=editor;
    }

}

export default DataSource;